<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/Head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="${resourceServer }/css/pintuer.css">
<link rel="stylesheet" href="${resourceServer }/css/admin.css">
<script src="${resourceServer }/js/jquery.js"></script>
<script src="${resourceServer }/js/pintuer.js"></script>
<script src="${resourceServer }/js/vue.min.js"></script>
<script charset="utf-8" src="${basepath }/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="${basepath }/kindeditor/lang/zh_CN.js"></script>
<style>
.search li {
	border: 1px solid #ccc;
	padding: 0px 10px;
	cursor: pointer;
}

.search .select {
	background: #66f9fd;
	color: #fff;
}
</style>
</head>
<body>
	<div id="app" class="panel admin-panel">
		<div class="panel-head" id="add">
			<strong><span class="icon-pencil-square-o"></span>修改商品</strong>
		</div>
		<div class="padding border-bottom">
			<ul class="search" style="padding-left: 10px;">
				<li :class="{select:selected==1}" @click="selected=1">基本信息</li>
				<li :class="{select:selected==2}" @click="selected=2">商品图片</li>
				<li :class="{select:selected==3}" @click="selected=3">详细信息</li>
				<li :class="{select:selected==4}" @click="selected=4">其他信息</li>
			</ul>
		</div>
		<form method="post" class="form-x" enctype="multipart/form-data">
			<input type="hidden" value="${product.id }" name="id">
			<div class="body-content" v-show="selected==1">
				<div class="form-group">
					<div class="label">
						<label>商品名称：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="${product.name }"
							name="name" data-validate="required:请输入品牌名" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>品牌：</label>
					</div>
					<div class="field">
						<select class="input w50" name="brandId">
							<c:forEach items="${ brands}" var="brand">
								<c:choose>
									<c:when test="${brand.id eq product.brandId }">
										<option value="${brand.id }" selected>${brand.name}</option>
									</c:when>
									<c:otherwise>
										<option value="${brand.id }">${brand.name}</option>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>排序：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="${product.sort }"
							name="sort" data-validate="plusinteger:排序必须为数字" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>是否热卖：</label>
					</div>
					<div class="field" style="padding-top: 8px;">
						<c:if test="${product.isHot eq 1 }">
							<label>是<input name="isHot" type="radio" value="1"
								checked></label>&nbsp;&nbsp;
						<label>否<input name="isHot" type="radio" value="0"></label>
						</c:if>
						<c:if test="${product.isHot eq 0 }">
							<label>是<input name="isHot" type="radio" value="1"></label>&nbsp;&nbsp;
						<label>否<input name="isHot" type="radio" value="0" checked></label>
						</c:if>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>是否新品：</label>
					</div>
					<div class="field" style="padding-top: 8px;">
						<c:if test="${product.isNew eq 1 }">
							<label>是<input name="isNew" type="radio" value="1"
								checked></label>&nbsp;&nbsp;
						<label>否<input name="isNew" type="radio" value="0"></label>
						</c:if>
						<c:if test="${product.isNew eq 0 }">
							<label>是<input name="isNew" type="radio" value="1"></label>&nbsp;&nbsp;
						<label>否<input name="isNew" type="radio" value="0" checked></label>
						</c:if>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>是否推荐：</label>
					</div>
					<div class="field" style="padding-top: 8px;">
						<c:if test="${product.isCommend eq 1 }">
							<label>是<input name="isCommend" type="radio" value="1"
								checked></label>&nbsp;&nbsp;
						<label>否<input name="isCommend" type="radio" value="0"></label>
						</c:if>
						<c:if test="${product.isCommend eq 0 }">
							<label>是<input name="isCommend" type="radio" value="1"></label>&nbsp;&nbsp;
						<label>否<input name="isCommend" type="radio" value="0"
								checked></label>
						</c:if>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label></label>
					</div>
					<div class="field">
						<button class="button bg-main icon-check-square-o" type="submit">
							提交</button>
					</div>
				</div>
			</div>

			<!-- ----------------------------------------------------------------------------------------- -->

			<div class="body-content" v-show="selected==2">
				<div class="form-group">
					<div class="label">
						<label>图片：</label>
					</div>
					<div class="field">
						<input type="file" id="image" name="imageList"
							style="display: none" enctype="multipart/form-data"
							multiple @change="imgchange()"> <input type="button"
							class="button bg-blue margin-left" @click="openImage()"
							value="上传图片" style="float: left;"> <br> <br> <br>

						<c:forEach items="${ imagesList}" var="image">
							<img class="imagehide" src="${imgServer }/${image}" width="400px"
								height="200px" />
							<br>
							<br>
						</c:forEach>
						<div id="yulan"></div>
					</div>
				</div>
				<!-- <div id="yulan"></div> -->
			</div>

			<!-- ----------------------------------------------------------------------------------------- -->

			<div class="body-content" v-show="selected==3">
				<div class="form-group">
					<div class="label">
						<label>内容：</label>
					</div>
					<div class="field">
						<textarea id="description" name="description" class="input"
							style="height: 450px; border: 1px solid #ddd;">${product.description }</textarea>
						<div class="tips"></div>
					</div>
				</div>
			</div>

			<!-- ----------------------------------------------------------------------------------------- -->

			<div class="body-content" v-show="selected==4">
				<div class="form-group">
					<div class="label">
						<label>参考价格：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" name="price"
							data-validate="plusdouble:请输入正确价格" value="${product.price }" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>销量：</label>
					</div>
					<div class="field">
						<input type="text" class="input w50" value="${product.sales }"
							name="sales" data-validate="plusinteger:请输入正整数" />
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>内存：</label>
					</div>
					<div class="field" style="padding-top: 8px">

						<c:forEach items="${storages }" var="storage">
							<c:set var="flag" value="0"></c:set>
							<c:forEach items="${storList}" var="stor">
								<c:if test="${stor eq  storage.id}">
									<label> ${storage.name } <input type="checkbox"
										name="storageList" value="${storage.id }" checked>
									</label>
									<c:set var="flag" value="1"></c:set>
								</c:if>
							</c:forEach>
							<c:if test="${flag eq 0 }">
								<label> ${storage.name } <input type="checkbox"
									name="storageList" value="${storage.id }">
								</label>
							</c:if>

						</c:forEach>
						<div class="tips"></div>
					</div>
				</div>
				<div class="form-group">
					<div class="label">
						<label>颜色：</label>
					</div>
					<div class="field" style="padding-top: 8px">
						<c:forEach items="${colors }" var="color">
							<c:set var="flag2" value="0"></c:set>
							<c:forEach items="${colorList}" var="colorr">
								<c:if test="${colorr eq color.id }">
									<label> ${color.name } <input type="checkbox"
										name="colorList" value="${color.id }" checked>
									</label>
									<c:set var="flag2" value="1"></c:set>
								</c:if>
							</c:forEach>
							<c:if test="${flag2 eq 0 }">
								<label> ${color.name } <input type="checkbox"
									name="colorList" value="${color.id }">
								</label>
							</c:if>
						</c:forEach>
						<div class="tips"></div>
					</div>
				</div>
			</div>

			<!-- ----------------------------------------------------------------------------------------- -->

		</form>
	</div>
	<script type="text/javascript">
		KindEditor.ready(function(K) {
			window.editor = K.create('#description', {
				width : "700px",
				height : "450px",
				uploadJson : "${basepath}/product/upload.do",
				filePostName : "img"
			});
		});
		var vue = new Vue({
			el : "#app",
			data : {
				selected : 1
			},
			methods : {
				openImage : function() {
					$("#image").click();
				},
				imgchange : function() {
					$("#yulan").empty();
					for (var i = 0; i < $("#image")[0].files.length; i++) {
						var fileReader = new FileReader();
						fileReader.onload = function(e) {
							var $img = $("<img>");
							$img.attr("height", "200px");
							$img.attr("width", "400px");
							$img.attr("src", e.target.result);
							$("#yulan").append($img).append($("<br/>")).append(
									$("<br/>"));
							$(".imagehide").hide();
						}
						fileReader.readAsDataURL($("#image")[0].files[i]);
					}

				}
			}
		});

		/* $(function(){
			$("#logo").change(function(){
				var fileReader=new FileReader();
				fileReader.onload=function(e){
					$("#url").attr("data-image",e.target.result);
					$("#url").val($("#logo").val());
				}
				fileReader.readAsDataURL($("#logo")[0].files[0]);
			});
			$("#image").click(function(){
				$("#logo").click();
			});
		}); */
	</script>
</body>
</html>